<template>
  <div class="user">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">用户管理</span>
        <el-button style="float: right;" type="primary" @click="dialogOpen('add')">新增用户</el-button>
      </div>
      <s-table
        :table="table"
        @http="tableWatch">
        <el-table-column
          fixed="right"
          align="center"
          slot="operation"
          class-name="operationMore"
          label="操作"
          width="80">
          <template slot-scope="s">
            <el-tooltip placement="top">
              <div slot="content">权限详情</div>
              <el-button type="info" icon="search" size="mini" @click="dialogAuthSearchOpen(s.row)"></el-button>
            </el-tooltip>
            <el-tooltip placement="top">
              <div slot="content">更多可用操作</div>
              <el-popover
                popper-class="demo-table-expand"
                placement="right"
                title="更多可用操作"
                trigger="click">
                <slot name="content">
                  <div>
                    <el-button type="info" size="mini" @click="dialogRoleOpen(s.row)">分配角色</el-button>
                    <el-button type="warning" size="mini" @click="dialogDatasOpen(s.row)" v-if="s.row.lx === '3' || s.row.lx === '2'">分配数据</el-button>
                    <el-button :type="s.row.sfyx === '1'?'danger':'success'" size="mini" @click="tableLockingUser(s.row.sfyx === '1' ? 2 : 1,s.row)">{{s.row.sfyx === '1'?'禁用':'启用'}}用户</el-button>
                    <el-button size="mini" type="warning" @click="tableResetPwd(s.row)">重置密码</el-button>
                  </div>
                </slot>
                <el-button slot="reference" type="info" icon="more" :plain="true" size="mini" class="__reference"></el-button>
              </el-popover>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          width="40px"
          slot="moreTop"
          align="center"
          class-name="portrait"
          prop="photo">
          <template slot-scope="s">
            <img :src="'/image/users/' + (s.row.photo||'base1.png')"
                 style="width: 24px;height: 24px;border-radius: 50%;float:left;"
                 alt="">
          </template>
        </el-table-column>
        <el-form-item label="登录名" prop="dlm">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_dlm"
                    placeholder="登录名" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="用户类型" prop="lx">
          <el-select v-model="autoVue_table_lx" placeholder="请选择">
            <el-option
              v-for="item in USER.lx"
              :key="item.dictionaryid"
              :label="item.value"
              :value="item.dictionaryid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户实名" prop="sm">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_sm"
                    placeholder="用户实名" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
      </s-table>
    </el-card>

    <s-dialog :dialog="dialog" :close="dialogInit">
      <p slot="title">{{dialog.title}}用户</p>
      <s-form :form="formDialog" ref="formDialog">
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}">
            <el-form-item prop="dlm" label="登录名">
              <el-input
                type="text"
                v-model="formDialog.dlm"
                placeholder="登录名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}">
            <el-form-item prop="ssckid" label="仓库">
              <el-select v-model="formDialog.ssckid"
                         filterable
                         remote
                         placeholder="请输入仓库名称"
                         :remote-method="dialogRemoteSsckid">
                <el-option
                  v-for="item in dialog.ssckid"
                  :key="item.dictionaryid"
                  :label="item.value"
                  :value="item.dictionaryid">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}">
            <el-form-item prop="sm" label="用户实名">
              <el-input
                type="text"
                v-model="formDialog.sm"
                placeholder="用户实名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}">
            <el-form-item prop="xb" label="性别">
              <el-select v-model="formDialog.xb" placeholder="请选择">
                <el-option
                  v-for="item in USER.xb"
                  :key="item.dictionaryid"
                  :label="item.value"
                  :value="item.dictionaryid">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}">
            <el-form-item prop="yx" label="用户邮箱">
              <el-input
                type="text"
                v-model="formDialog.yx"
                placeholder="用户邮箱"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}">
            <el-form-item prop="dh" label="用户电话">
              <el-input
                type="text"
                v-model="formDialog.dh"
                placeholder="用户电话"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}">
            <el-form-item prop="zz" label="用户住址">
              <el-input
                type="text"
                v-model="formDialog.zz"
                placeholder="用户住址"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}">
            <el-form-item prop="lx" label="用户类型">
              <el-select v-model="formDialog.lx" placeholder="请选择">
                <el-option
                  v-for="item in USER.lx"
                  :key="item.dictionaryid"
                  :label="item.value"
                  :value="item.dictionaryid">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}">
            <el-form-item prop="bz" label="备注">
              <el-input
                type="text"
                v-model="formDialog.bz"
                placeholder="备注"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </s-form>
      <el-button slot="footer" @click="dialogSave">保存</el-button>
    </s-dialog>
    <s-dialog :dialog="dialogRole" :close="dialogRoleInit">
      <p slot="title">分配角色</p>
      <s-table
        :multiSelect="true"
        :expand="false"
        :table="tableDialogRole"
        ref="tableDialogRole"
        @http="tableWatch">
        <el-form-item label="角色名称" prop="name">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_tableDialogRole_mc"
                    placeholder="角色名称" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
      </s-table>
      <el-button slot="footer" @click="dialogRoleSave">保存</el-button>
    </s-dialog>
    <s-dialog :dialog="dialogAuthSearch" :close="dialogAuthSearchInit">
      <p slot="title">权限详情 <span>{{dialogAuthSearch.row.sm}}</span></p>
      显示用户角色信息，与数据信息
      <el-button slot="footer" @click="dialogAuthSearchSave">保存</el-button>
    </s-dialog>
    <s-dialog :dialog="dialogDatas" :close="dialogDatasInit">
      <p slot="title">分配数据权限</p>
      <s-table
        v-if="dialogDatas.row.lx === '2'"
        :multiSelect="true"
        :expand="false"
        :table="tableDialogDatas2"
        ref="tableDialogDatas2"
        @http="tableWatch">
        <el-form-item label="货主名称" prop="mc">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_tableDialogDatas2_mc"
                    placeholder="货主名称" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
      </s-table>
      <div v-else>
        <el-select
          v-model="autoVue_tableDialogDatas3_sshzid"
          filterable
          remote
          :remote-method="remoteMethodDatas"
          placeholder="请选择">
          <el-option
            v-for="item in dialogDatas.hzs"
            :key="item.dictionaryid"
            :label="item.value"
            :value="item.dictionaryid">
          </el-option>
        </el-select>
        <s-table
          :multiSelect="true"
          :expand="false"
          :table="tableDialogDatas3"
          ref="tableDialogDatas3"
          @http="tableWatch">
          <el-form-item label="供应商名称" prop="mc">
            <el-input type="text"
                      class="input"
                      v-model="autoVue_tableDialogDatas3_mc"
                      placeholder="供应商名称" spellcheck="false" auto-capitalize="off" auto-complete="off"
                      auto-correct="off"></el-input>
          </el-form-item>
        </s-table>
      </div>
      <el-button slot="footer" @click="dialogDatasSave">保存</el-button>
    </s-dialog>
  </div>
</template>

<script>
  import {AutoVue, AutoPromise} from '~/plugins/Tools';

  function __form () {
    return { dlm: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      ssckid: { value: '', rule: [ 'vNull__change' ], cRemarks: '' },
      sm: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      xb: { value: '0', rule: [ 'vNull' ], cRemarks: '0.男 1.女' },
      yx: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      dh: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      zz: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      bz: { value: '', rule: [], cRemarks: '' },
      lx: { value: '2', rule: [], cRemarks: '0系统管理员 1仓库管理员 2仓库操作员 3供应商' }};
  }
  function __dialogRole () {
    return {
      row: {},
      jsid: '',
      jsids: [],
      yhid: '',
    };
  }
  function __dialogDatas () {
    return {
      row: {},
      gysid: '',
      gysids: [],
      hzs: [],
      hz: '',
    };
  }
  function __dialogAuthSearch () {
    return {
      row: {},
    };
  }
  export default AutoVue({
    name: 'system_user-FEcarWms',
    store: ['DICTIONARY_user', 'USER'],
    data: {
      table: {
        column: [
          { label: '登录名',
            prop: 'dlm',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: '仓库',
            prop: 'ssckid',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '用户实名',
            prop: 'sm',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: '用户类型',
            prop: 'show_lx',
            minWidth: '0px',
            cRemarks: '0系统管理员 1仓库管理员 2仓库操作员 3供应商',
            search: true },
          { label: '状态',
            prop: 'show_sfyx',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '性别',
            prop: 'show_xb',
            minWidth: '0px',
            cRemarks: '0.男 1.女',
            search: false },
          { label: '用户邮箱',
            prop: 'yx',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '用户电话',
            prop: 'dh',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '用户住址',
            prop: 'zz',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '备注',
            prop: 'bz',
            minWidth: '0px',
            cRemarks: '',
            search: false }],
        url: '/sysuser/list',
        key: 'id',
        tableColumn: 5,
        muti: false,
      },
      formDialog: __form(),
      dialog: {
        title: '新增',
        row: {},
        ssckid: [],
      },
      dialogRole: __dialogRole(),
      tableDialogRole: {
        column: [
          { label: '角色名称',
            prop: 'mc',
            minWidth: '0px',
            search: true,
          },
          { label: '角色描述',
            prop: 'bz',
            minWidth: '0px',
            search: false,
          },
        ],
        url: '/sysrole/list',
        key: 'id',
        tableColumn: 2,
        ids: [],
        muti: false,
      },
      dialogDatas: __dialogDatas(),
      tableDialogDatas2: {
        column: [
          { label: '货主名称',
            prop: 'mc',
            minWidth: '0px',
            cRemarks: '',
            search: true },
        ],
        url: '/sysuser/roleSelect',
        key: 'id',
        ids: [],
        tableColumn: 1,
        muti: false,
      },
      tableDialogDatas3: {
        column: [
          { label: '供应商名',
            prop: 'mc',
            minWidth: '0px',
            search: true,
          },
          { label: '货主ID',
            prop: 'sshzid',
            minWidth: '0px',
            search: true,
          },
        ],
        url: '/sysuser/supplierSelect',
        key: 'id',
        tableColumn: 1,
        ids: [],
        muti: false,
      },
      dialogAuthSearch: __dialogAuthSearch(),
    },
    transition: 'slide-fade',
    methods: {
      tableEdit (row) {
        this.dialogOpen('PUT', row);
      },
      tableDelete (row) {
        this.$confirm('您将删除用户。', '确认删除？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        })
          .then(async _ => {
            try {
              await this.post('/user/delete/', [row.id]);
              this.tableWatch('table');
            } catch (err) {
              console.log(err);
            }
          })
          .catch(_ => {
          });
      },
      tableMultiDelete () {
        this.$confirm('您将删除这些用户。', '确认删除？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        })
          .then(async _ => {
            let ids = [];
            for (let item of this.table.multipleSelection) {
              ids.push(item.id);
            }
            try {
              await this.post('/user/delete/', ids);
              this.tableWatch('table');
            } catch (err) {
              console.log(err);
            }
          })
          .catch(_ => {
          });
      },
      tableLockingUser (state, row) {
        this.$confirm(`您将${state === 1 ? '启用' : '锁定'}这些用户。`, '是否确认？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        })
          .then(async _ => {
            try {
              await this.post(`/sysuser/zuoFie/${row.id}/${state}`);
              this.tableWatch('table');
            } catch (err) {
              console.log(err);
            }
          })
          .catch(_ => {
          });
      },
      tableResetPwd (row) {
        this.$confirm('您将重置用户密码。', '是否确认？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        })
          .then(async _ => {
            let ids = [];
            if (!row) {
              for (let item of this.table.multipleSelection) {
                ids.push(item.id);
              }
            } else {
              ids.push(row.id);
            }
            try {
              await this.post('/sysuser/resetpassword/' + ids);
              this.tableWatch('table');
            } catch (err) {
              console.log(err);
            }
          })
          .catch(_ => {
          });
      },
      dialogInit () {
        this.dialog.row = {};
        this.dialog.ssckid = [];
        this.formDialog = {
          ...this.formDialog,
          ...this.ObjectClone(__form()),
        };
        this.resetFields('formDialog');
      },
      async dialogRemoteSsckid (query) {
        this.dialog.ssckid = await this.post('/sysuser/addSearchArea', {mc: query});
      },
      async dialogOpen (type, more) {
        await AutoPromise([
          async () => {
            if (!this.DICTIONARY_user) {
              await this.USE('DICTIONARY_user');
            }
          },
          async () => {
            await this.dialogRemoteSsckid();
          },
        ]);
        this.dialog.title = '新增';
        this.dialog.visible = true;
      },
      dialogSave () {
        this.VALIDATE('formDialog', async option => {
          try {
            let {data} = await this.post('/sysuser/add', option);
            this.table.data = [data, ...this.table.data];
            this.table.total++;
            this.dialogInit();
            this.dialog.visible = false;
          } catch (err) {
            console.log(err);
          }
        });
      },
      dialogRoleInit () {
        let step = __dialogRole();
        for (let index in step) {
          if (step.hasOwnProperty(index)) {
            this.dialogRole[index] = step[index];
          }
        }
        let tableRef = 'tableDialogRole';
        this[tableRef].ids = [];
        this.$refs[tableRef].$refs[tableRef].clearSelection();
      },
      async dialogRoleOpen (row) {
        this.dialogRole.row = row;
        let {ids} = await this.get('/sysuser/jsUser/' + row.id);
        this.tableDialogRole.ids = ids;
        this.tableWatch('tableDialogRole');
        this.dialogRole.visible = true;
      },
      dialogRoleSave () {
        let table = this.tableDialogRole;
        if (table.multipleSelection.length !== 1) {
          this.$alert('请您选择一个！', '提示');
          return;
        }
        this.post('/sysuser/jsAdd', {
          jsid: table.multipleSelection[0].id,
          yhid: this.dialogRole.row.id,
        });
        this.dialogRoleInit();
        this.dialogRole.visible = false;
      },
      dialogAuthSearchInit () {
        this.dialogAuthSearch = __dialogAuthSearch();
      },
      async dialogAuthSearchOpen (row) {
        this.dialogAuthSearch.row = row;
        this.dialogAuthSearch.visible = true;
      },
      dialogAuthSearchSave () {
        /*
        this.post('/sysuser/jsAdd', {
          jsid: this.dialogAuthSearch.jsid,
          yhid: this.dialogAuthSearch.row.id,
        });
        this.dialogAuthSearchInit();
        */
        this.dialogAuthSearch.visible = false;
      },
      dialogDatasInit () {
        this.tableDialogDatas2.data = [];
        this.tableDialogDatas2.ids = [];
        this.tableDialogDatas3.data = [];
        this.tableDialogDatas3.ids = [];
        this.dialogDatas.row = {};
        this.dialogDatas.gysid = '';
        this.dialogDatas.gysids = [];
        this.dialogDatas.hzs = [];
        this.autoVue_tableDialogDatas3_sshzid = '';
      },
      dialogDatasOpen (row) {
        this.dialogDatas.row = row;
        this.dialogDatas.visible = true;
        this.$nextTick(async () => {
          if (row.lx === '2') {
            let {ids} = await this.get('/sysuser/hzSelectId/' + row.id);
            this.tableDialogDatas2.ids = ids;
            this.tableWatch('tableDialogDatas2');
          } else {
            await AutoPromise([
              async () => {
                let {ids} = await this.get('/sysuser/gysUser/' + row.id);
                this.tableDialogDatas3.ids = ids;
              },
              async () => {
                this.dialogDatas.hzs = await this.post('/sysuser/hzSearch', {
                  mc: '',
                });
              },
            ]);
          }
        });
      },
      async dialogDatasSave () {
        try {
          if (this.dialogDatas.row.lx === '2') {
            let table = this.tableDialogDatas2;
            if (table.multipleSelection.length < 1) {
              this.$alert('请您至少选择一个！', '系统提示');
              return;
            }
            let ids = [];
            for (let item of table.multipleSelection) {
              ids.push(item.id);
            }
            await this.post('/sysuser/roleAdd', {
              hzid: ids,
              yhid: this.dialogDatas.row.id,
            });
          } else {
            let table = this.tableDialogDatas3;
            if (table.multipleSelection.length !== 1) {
              this.$alert('请您选择一个！', '系统提示');
              return;
            }
            await this.post('/sysuser/supplierAdd', {
              gysid: table.multipleSelection[0].id,
              yhid: this.dialogDatas.row.id,
            });
          }
          this.dialogDatasInit();
          this.dialogDatas.visible = false;
        } catch (err) {
          console.log(err);
        }
      },
      async remoteMethodDatas (query) {
        this.dialogDatas.hzs = await this.post('/sysuser/hzSearch', {
          mc: query,
        });
      },
    },
    mounted: async function () {
      await AutoPromise([
        async () => {
          if (!this.DICTIONARY_user) {
            await this.USE('DICTIONARY_user');
          }
        },
        async () => {
          this.tableWatch('table');
        },
      ]);
    },
  });
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .box-card {
    margin: 20px;
  }

  .createTimeSpan {
    display: block;
    margin-top: 34px;
  }

  @media screen and (max-width: 800px) {
    .createTimeSpan {
      margin-top: 0;
    }
    .box-card {
      margin: 0;
    }
  }

  .el-select {
    width: 100%;
  }
</style>

<style lang="scss">
  .user{
    width: 88vw;
    float: left;
  }

  .form_item_user{
    margin-bottom: 0;
  }

  .upload-user {
    display: block;
    width: 100%;
    float: left;
    .el-upload {
      width: 100px;
      height: 100px;
      border-radius: 50% !important;
      border: 1px solid #fdfffb;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: all .5s;
      &:hover {
        border: 1px solid #20a0ff;
        .avatar-uploader-icon{
          color: #20a0ff;
        }
      }
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 100%;
      height: 100%;
      line-height: 100px;
      text-align: center;
    }
    .avatar {
      width: 100%;
      height: 100%;
      display: block;
    }
  }

  .user .el-switch__label {
    span {
      font-size: 12px;
    }
  }

  .user .portrait .cell{
    padding: 0 10px;
  }

  .user .__transfer .el-checkbox__label{
    .label{
      padding-right: 5px;
    }
    .name{

    }
    .show_appId{
      color: #0affce;
    }
    .show_rentId{
      color: #d35e56;
    }
  }

</style>
